<template>
  <a-row class="loginContainer" type="flex" justify="end">
    <a-col span="8">
      <a-card title="用户登录" class="loginCard">
        <a-form
          class="loginForm"
          :model="form"
          :labelCol="formLayout.labelCol"
          :wrapperCol="formLayout.wrapperCol"
        >
          <a-form-item label="用户名">
            <a-input v-model:value="form.username" placeholder="请输入用户名" />
          </a-form-item>
          <a-form-item label="密码">
            <a-input-password
              v-model:value="form.password"
              placeholder="请输入密码"
            />
          </a-form-item>
          <a-button @click="login" :loading="loginLoading">登录</a-button>
        </a-form>
      </a-card>
    </a-col>
  </a-row>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import axios, { AxiosResponse } from "axios";
import querystring from "query-string";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
import { myPost, BASE_URL } from "@/utils/request";

let respBody = {
  isSuccess: false,
  msg: "",
  data: []
};

export default defineComponent({
  name: "Login",
  props: {
    // formLayout: Object,
    // form: Object,
    // login: Function,
    // msg: String,
    // showSuccess: Boolean,
    // showFailed: Boolean,
    // loginLoading: Boolean
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const formLayout = {
      labelCol: { span: 4, offset: 4 },
      wrapperCol: { span: 12 }
    };
    const form = reactive({
      username: "",
      password: ""
    });

    let showSuccess = false;
    let showFailed = false;
    let loginLoading = false;
    let msg = "";

    function error() {
      loginLoading = false;
      msg = respBody["msg"];
      message.error({ content: msg, duration: 2 });
      setTimeout(() => {
        showFailed = false;
      }, 1000);
    }

    function success() {
      loginLoading = false;
      store.commit("updateUserData", respBody["data"][0]);
      msg = "欢迎你！" + store.getters.name;
      message.success({ content: msg, duration: 2 });
      setTimeout(() => {
        showSuccess = false;
      }, 500);
      switch (store.getters.role) {
        case "ADMIN":
          router.push({ path: "/admin" });
          break;
        case "STUFF":
          router.push({ path: "/stuff" });
          break;
        case "OFFICER":
          router.push({ path: "/officer" });
          break;
        case "INVALID":
          error();
          break;
      }
    }

    function login() {
      loginLoading = true;
      console.log("POSTing loginForm...");
      console.log(process.env);
      console.log(BASE_URL);
      myPost(BASE_URL + "/user/login/", form)
        .then((resp: AxiosResponse) => {
          respBody = resp.data;
          if (respBody["isSuccess"]) {
            success();
          } else {
            error();
          }
        })
        .catch((error: any) => {
          console.log(error);
          return false;
        });
      return false;
    }

    return {
      formLayout,
      form,
      login,
      msg,
      showSuccess,
      showFailed,
      loginLoading
    };
  }
});
</script>

<style lang="less">
.loginContainer {
  /*align-content: center;*/
  width: 100%;
  margin-top: min(50px, calc(~"5% - 0px"));
  text-align: center;
}

.loginCard {
  max-width: 400px;
}
</style>
